<template>
	<view class="chargeMap">

		<!-- 搜索框 -->
		<view class="chargeMap-nav">
			<view class="chargeMap-leftcity">
				西安市
				<u-icon name="arrow-down-fill" size="15" class="cityicon"></u-icon>
			</view>
			<view class="chargeMap-search">
				<u-search border-color="#f66d1e" search-icon-color="#f66d1e" bg-color="#ffffff" placeholder="输入电站名称"
					:show-action="false" v-model="keyword"></u-search>
			</view>
			<view class="chargeMap-scan">
				<u-icon name="scan" size="50" color="#f66d1e"></u-icon>
			</view>
		</view>

		<!--白色悬浮内容部分-->
		<view class="whitecontent" :style="{'height':height+'rpx'}">

			<!-- 固定两个小图标 -->
			<view class="fixedicons" :style="{'bottom': iconbottom+'rpx'}">
				<image style="width: 80rpx;height:80rpx" src="../../static/images/lrx/button_charge@3x.png"></image>
				<image style="width: 80rpx;height:80rpx" src="../../static/images/lrx/button_back@3x.png"></image>
			</view>

			<!-- 显示自己的或者充电桩 -->
			<view v-if="!isshowchargeitem">
				<!-- 切换展开或收起 -->
				<view style="text-align: center;">
					<view @tap="changeHeight" style="height: 40rpx;" v-if="!ischange">
						<image style="width: 40rpx;height: 40rpx;" src="../../static/images/lrx/button_chargeup@2x.png">
						</image>
					</view>
					<view @tap="changeHeight" style="height: 40rpx;line-height: 40rpx;" v-else>
						<image style="width: 40rpx;height: 4rpx;margin-bottom: 10rpx;"
							src="../../static/images/lrx/button_line@3x.png">
						</image>
					</view>
				</view>

				<!-- 收起时显示页面 -->
				<view v-show="!ischange" class="closebox">
					<scroll-view scroll-x="true" style="width: 680rpx;margin: 0 auto;">
						<view class="closebox-view">
							<view class="closebox-item">离我最近</view>
							<view class="closebox-item">对外开放</view>
							<view class="closebox-item">免费停车</view>
							<view class="closebox-item">空闲较多</view>
							<view class="closebox-item">空闲较少</view>
						</view>
					</scroll-view>
					<view class="" style="text-align: center;margin-top: 16rpx;">
						展开查看电站列表
					</view>
				</view>

				<!-- 展开时显示页面 -->
				<view v-show="ischange" class="openbox">
					<!-- 选择器 -->
					<u-dropdown active-color="#f5610c" ref="uDropdown" @open="open" @close="close">
						<u-dropdown-item @change="changevalue1()" v-model="value1" :title="title1" :options="options1">
						</u-dropdown-item>
						<u-dropdown-item v-model="value2" title="附近"></u-dropdown-item>
						<u-dropdown-item v-model="value2" title="筛选" :options="options2"></u-dropdown-item>
					</u-dropdown>

					<!-- 下面显示内容 -->
					<scroll-view scroll-y="true" style="height: 400rpx;">
						<!-- 上拉显示详情 -->
						<view class="contentBox">
							<!-- 充电站详情 -->
							<view class="chargelist" v-for="item in 4" :key="item">

								<!-- 左边充电桩标识 -->
								<navigator url="/pages/chargedetail/chargedetail">
									<view class="leftdetail">
										<text class="leftTitle">
											望江楼公园充电站
										</text>
										<view class="biaoqian">
											<text class="biaoqianitem">免费停车</text>
											<text class="biaoqianitem">对外开放</text>
											<text class="biaoqianitem">休息室</text>
										</view>

										<view class="bottomitrm">
											<view class="bottomprice">
												￥<text class="bottompricered">0.9500</text>元/度
											</view>
											<view class="bottomimages">
												<image class="imgitem"
													src="../../static/images/lrx/tab_chargezhi@3x.png" mode="">
												</image>
												<image class="imgitem"
													src="../../static/images/lrx/tab_chargejiao@3x.png" mode="">
												</image>
											</view>
										</view>
									</view>

								</navigator>

								<!-- 右边图标 -->
								<view class="rightdetail">
									<image class="rightimg" src="../../static/images/lrx/icon_confirmednav@3x.png"
										mode="">
									</image>
									<text>1.23km</text>
								</view>
							</view>

						</view>

					</scroll-view>

				</view>

			</view>
			<!-- 点击充电桩时显示的单个充电桩详情 -->
			<view v-else class="chargeItem">
				<!-- 充电站详情 -->
				<view class="chargelist" v-for="item in 5" :key="item">

					<!-- 左边充电桩标识 -->
					<navigator url="/pages/chargedetail/chargedetail">
						<view class="leftdetail">
							<text class="leftTitle">
								望江楼公园充电站
							</text>
							<view class="biaoqian">
								<text class="biaoqianitem">免费停车</text>
								<text class="biaoqianitem">对外开放</text>
								<text class="biaoqianitem">休息室</text>
							</view>

							<view class="bottomitrm">
								<view class="bottomprice">
									￥<text class="bottompricered">0.9500</text>元/度
								</view>
								<view class="bottomimages">
									<image class="imgitem" src="../../static/images/lrx/tab_chargezhi@3x.png" mode="">
									</image>
									<image class="imgitem" src="../../static/images/lrx/tab_chargejiao@3x.png" mode="">
									</image>
								</view>
							</view>
						</view>
					</navigator>


					<!-- 右边图标 -->
					<view class="rightdetail">
						<image class="rightimg" src="../../static/images/lrx/icon_confirmednav@3x.png" mode=""></image>
						<text>1.23km</text>
					</view>
				</view>
			</view>




			<!-- 111 -->
		</view>



		<!-- 地图 -->
		<map class="mapbox" @markertap="showcharge" :latitude="latitude" :longitude="longitude" :markers="covers"
			style="overflow: hidden;">
		</map>


	</view>

</template>


<script>
	export default {
		data() {
			return {
				keyword: '',
				ischange: false,
				latitude: 39.909,
				longitude: 116.39742,
				title1: "综合",
				// 悬浮白色内容高度
				height: 180,
				// 固定图标离底部的距离
				iconbottom: 230,
				// 是否显示充电桩点
				isshowchargeitem: false,
				//地图标记点
				covers: [{
					id: 11,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/images/lrx/charge@2x.png',
					width: '50rpx',
					height: "50rpx"
				}, {
					id: 12,
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/images/lrx/charge@2x.png',
					width: '50rpx',
					height: "50rpx"
				}],
				// 筛选相关
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '价格升序',
						value: 2,
					},
					{
						label: '价格降序',
						value: 3,
					}
				],
				options2: [{
						label: '条件1',
						value: 1,
					},
					{
						label: '条件2',
						value: 2,
					},
				],
			}
		},
		methods: {
			// 切换展开或收起时改变高度和显示内容
			changeHeight() {
				if (!this.ischange) {
					this.ischange = !this.ischange;
					this.height = 500;
					this.iconbottom = 550;
				} else {
					this.ischange = !this.ischange;
					this.height = 180;
					this.iconbottom = 230;
				}
			},
			// 筛选时的高亮打开和关闭
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			changevalue1(index) {
				this.title1 = this.options1[index - 1].label;
			},
			// 点击是否显示当前充电桩
			showcharge(e) {
				console.log(e.detail)
				//如果点击当前位置，则显示下拉菜单，点击其他位置显示其他电桩详情。
				if (e.detail.markerId == 11) {
					this.isshowchargeitem = false;
					this.changeHeight();
				} else {
					this.isshowchargeitem = true;
					this.height = 230;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chargeMap {

		// 搜索框栏
		.chargeMap-nav {
			background-color: white;
			height: 90rpx;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.chargeMap-leftcity {
				width: 130rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;

				.cityicon {
					margin-bottom: 40rpx;
					margin-left: 6rpx;
				}
			}

			.chargeMap-search {
				width: 450rpx;
			}

			.chargeMap-scan {
				text-align: center;
				padding: 10rpx;
			}
		}

		// 地图
		.mapbox {
			width: 100%;
			height: calc(100vh - 90rpx);
		}

		// 固定图标
		.fixedicons {
			position: fixed;
			width: 80rpx;
			right: 20rpx;
			transition: bottom 0.4s;
		}

		// 白色内容部分
		.whitecontent {
			width: 700rpx;
			background-color: white;
			overflow: hidden;
			position: absolute;
			bottom: 40rpx;
			left: 20rpx;
			border-radius: 20rpx;
			z-index: 99;
			transition: height 0.4s;



			// 收起内容时
			.closebox {
				height: 60rpx;

				.closebox-view {
					display: flex;

					.closebox-item {
						border: 1px solid #707070;
						font-size: 24rpx;
						color: #999999;
						border-radius: 20rpx;
						padding: 2rpx 20rpx;
						width: 140rpx;
						margin: 10rpx 16rpx;
						// 压缩因子，都不适应缩小，保持原宽度
						flex-shrink: 0;
					}
				}
			}

			// 展开内容时下面的充电桩
			.contentBox {
				padding-bottom: 150rpx;
				color: #7b7b7b;
			}

			//单个充电桩详情
			.chargelist {
				border-bottom: 2rpx solid #dedede;
				height: 250rpx;
				display: flex;

				.leftdetail {
					padding: 20rpx 30rpx 0rpx 30rpx;

					.leftTitle {
						font-size: 38rpx;
						color: #000;
					}

					.biaoqian {
						margin-top: 20rpx;
						margin-bottom: 20rpx;

						.biaoqianitem {
							width: 200rpx;
							height: 30rpx;
							background-color: #e8e8e8;
							border-radius: 10rpx;
							font-size: 24rpx;
							padding: 10rpx;
							margin-right: 20rpx;
						}

					}

					.bottomitrm {
						display: flex;
						padding: 10rpx;

						.bottomprice {
							color: gray;
							vertical-align: middle;

							.bottompricered {
								color: #e91111;
								font-size: 40rpx;
							}

						}

						.bottomimages {
							.imgitem {
								margin-top: 15rpx;
								margin-left: 20rpx;
								width: 80rpx;
								height: 40rpx;
							}
						}
					}
				}

				// 右边详情
				.rightdetail {
					width: 80rpx;
					text-align: center;
					margin-top: 90rpx;
					margin-left: 30rpx;

					.rightimg {
						width: 60rpx;
						height: 60rpx;
					}

				}

			}
		}

	}
</style>
